<template>

  <div align="center">

    <el-card class="box-card">
      <el-button @click="b">注册</el-button>
      <el-button @click="a">登录</el-button>
      <div v-if="loginnnnnn">
        <div slot="header" class="clearfix">
          <span>登录页面</span>
          <el-form ref="form" :model="loginform" label-width="80px">
            <el-form-item label="手机号">
              <el-input v-model="loginform.mobile" />
            </el-form-item>
            <el-form-item label="密码">
              <el-input v-model="loginform.password" show-password />
            </el-form-item>

            <el-form-item label="验证码：">
              <el-input v-model="loginform.yzm" style="width: 100px" />
              <div class="login-code">
                <img :src="codeUrl" class="login-code-img" @click="codeOnclick()">
              </div>
            </el-form-item>

            <!--            <div class="login-code" @click="refreshCode">
              &lt;!&ndash;验证码组件&ndash;&gt;
              <yz :identifyCode="identifyCode"></yz>
            </div>-->

            <el-form-item>
              <el-button type="primary" @click="login">登录</el-button>
              <el-button type="primary" @click="gotologin">去注册</el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>

      <div v-if="regiest">
        <el-form ref="form" :model="form" label-width="120px">
          <el-form-item label="输入姓名">
            <el-input v-model="loginform.username" />
          </el-form-item>
          <el-form-item label="输入手机号">
            <el-input v-model="loginform.mobile" />
          </el-form-item>
          <el-form-item label="验证码：">
            <el-input v-model="loginform.yzm" style="width: 100px" />
            <div class="login-code">
              <img :src="codeUrl" class="login-code-img" @click="codeOnclick()">
            </div>
          </el-form-item>
          <el-form-item label="输入密码">
            <el-input v-model="loginform.password" show-password />
          </el-form-item>
          <el-form-item label="再次输入密码">
            <el-input v-model="loginform.password2" show-password />
          </el-form-item>
          <el-form-item>
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="saveloginuser">确 定</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-card>

  </div>
</template>

<script>
import axios from 'axios'
import Yz from '@/views/wish/yz'
export default {
  name: 'Userlogin',
  // eslint-disable-next-line vue/no-unused-components
  components: { Yz },
  data() {
    return {
      codeUrl: '',
      identifyCodes: '1234567890',
      identifyCode: '',
      loginform: {
        grant_type: 'password',
        code: '',
        randomStr: ''
      },
      loginnnnnn: true,
      regiest: false
    }
  },
  created() {
    this.codeOnclick()
  },
  methods: {
    codeOnclick() {
      this.loginform.randomStr = new Date().getTime()
      this.codeUrl = 'http://localhost:8200/code?randomStr=' + this.loginform.randomStr
    },

    a() {
      this.loginnnnnn = true
      this.regiest = false
    },
    b() {
      this.loginnnnnn = false
      this.regiest = true
    },
    login() {
      axios({
        method: 'post',
        url: 'http://localhost:8200/auth/oauth/token',
        params: this.loginForm,
        auth: {
          username: 'android',
          password: 'android'
        }
      }).then(function(res) {
        console.log('认证返回信息:{}', res)
        alert('成功获取token')
        localStorage.setItem('access_token', res.data.access_token)
        // $this.getUserInfo()
      })
    },
    saveloginuser() {
      alert(JSON.stringify(this.loginform))
    },
    gotologin() {
      this.dialogVisible = true
      this.loginform = {}
    },
    randomNum(min, max) {
      return Math.floor(Math.random() * (max - min) + min)
    },
    refreshCode() {
      this.identifyCode = ''
      this.makeCode(this.identifyCodes, 4)
    },
    makeCode(o, l) {
      for (let i = 0; i < l; i++) {
        this.identifyCode += this.identifyCodes[
          this.randomNum(0, this.identifyCodes.length)
        ]
      }
      console.log(this.identifyCode)
    },
    mounted() {
      this.identifyCode = ''
      this.makeCode(this.identifyCodes, 4)
    }
  }
}

</script>

<style scoped>
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both
}

.box-card {
  width: 480px;
}
.code {
  width: 114px;
  height: 40px;
  border: 1px solid #ff0000;
}
.login-container {
  border-radius: 15px;
  background-clip: padding-box;
  margin: 180px auto;
  width: 350px;
  padding: 35px 35px 15px 35px;
  background: #fff;
  border: 1px solid #eaeaea;
  box-shadow: 0 0 25px #cac6c6;
}
.login_title {
  margin: 0px auto 40px auto;
  text-align: center;
  color: #505458;
}
.login_remember {
  margin: 0px 0px 35px 0px;
  text-align: left;
}

</style>
